<template>
  <div class="EpidemicSituationInfo">
    <!-- 描述信息 开始 -->
    <div class="descriptionInfo">
      <span class="descriptionInfo_time">07:00-10:00</span
      ><span class="descriptionInfo_text">为更新高峰，数据有滞后请谅解</span>
    </div>
    <!-- 描述信息 结束 -->
    <!-- 列表信息 开始 -->
    <div class="listInfoOuter">
      <div class="listInfo">
        <div class="headBox">
          <div
            v-for="(item, indexHead) in heardData"
            :key="indexHead"
            :class="item.className"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="contentBoxOuter">
          <div
            v-for="(item, indexContent) in epidemicSituationInfo"
            :key="indexContent"
            class="contentBox"
            :class="{ off: indexContent % 2 != 0 }"
          >
            <div class="contentBox_num" :class="item.row">
              {{ indexContent + 1 }}
            </div>
            <div class="contentBox_pie" :title="item.name" style="color: #bee2ed">
              {{ item.name }}
            </div>
            <div class="contentBox_pie" style="color:#ce3636">
              {{ item.confirm }}
            </div>
            <div class="contentBox_pie" style="color:#1dfe8d">
              {{ item.cure }}
            </div>
            <div class="contentBox_pie" style="color: #86a5b1">
              {{ item.dead }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 列表信息 结束 -->
    <!-- loading 开始 -->
    <div class="loading" v-show="loading === 2">
      <el-row v-loading="loadingTrue">
        <el-col :span="24"></el-col>
      </el-row>
    </div>
    <!-- loading 结束 -->
    <!-- 暂无数据 开始-->
    <div class="noData" v-show="noData === 2">
      暂无数据
    </div>
    <!-- 暂无数据 结束 -->
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { ZhtsServer } from "@/api/installServer";
@Component({
  name: "EpidemicSituationInfo",
  components: {}
})
export default class EpidemicSituationInfo extends Vue {
  private heardData: any = [
    {
      title: "",
      className: "headBox_num"
    },
    {
      title: "地区",
      className: "headBox_pie"
    },
    {
      title: "确诊",
      className: "headBox_pie"
    },
    {
      title: "治愈",
      className: "headBox_pie"
    },
    {
      title: "死亡",
      className: "headBox_pie"
    }
  ];
  private epidemicSituationInfo: any = "";
  private loading: any = 1; // 定义loading 1. 是loading不显示 2. 是loading显示
  private noData: any = 1; // 暂无数据 1 是不显示 2 是显示
  private loadingTrue: any = true;
  // 获取各地区疫情详情数据（各地区）
  @Watch("$store.state.ZhtsModule.district")
  private getEpidemicSituationLocalInfo(): void {
     $(".contentBoxOuter").scrollTop(0);
    this.noData = 1;
    this.loading = 2;
    let id = this.$store.state.ZhtsModule.district.id;
    if (id === '000000') {
        id = '0';
    }
    console.log("行政区划id:", id);
    ZhtsServer.getEpidemicSituationLocalInfo({
      parentNo: id
    }).then((res: any) => {
      this.loading = 1;
      console.log("当前请求过来的数据", res);
      if (res.data.length === 0) {
        this.noData = 2;
      }
      const compare = function(a: any, b: any) {
        return b.confirmCase - a.confirmCase;
      };
      const beforeSorted = res.data;
      const data = beforeSorted.sort(compare);
      data.forEach((item: any, index: any) => {
        if (index === 0) {
          item.row = "firstRow";
        } else if (index === 1) {
          item.row = "twoRow";
        } else if (index === 2) {
          item.row = "threeRow";
        } else {
          item.row = "fourRow";
        }
      });
      this.epidemicSituationInfo = data;
    });
  }
  // 获取各地区疫情详情数据（全国）
  private getEpidemicSituationInfo(): void {
    $(".contentBoxOuter").scrollTop(0);
    this.noData = 1;
    this.loading = 2;
    ZhtsServer.getEpidemicSituationLocalInfo({
      parentNo: '0'
    }).then((res: any) => {
      this.loading = 1;
      console.log("当前请求过来的数据", res);
      if (res.data.length === 0) {
        this.noData = 2;
      }
      const compare = function(a: any, b: any) {
        return b.confirmCase - a.confirmCase;
      };
      const beforeSorted = res.data;
      const data = beforeSorted.sort(compare);
      data.forEach((item: any, index: any) => {
        if (index === 0) {
          item.row = "firstRow";
        } else if (index === 1) {
          item.row = "twoRow";
        } else if (index === 2) {
          item.row = "threeRow";
        } else {
          item.row = "fourRow";
        }
      });
      this.epidemicSituationInfo = data;
    });
  }
  private created() {
      if (this.$store.state.ZhtsModule.district.id === "000000") {
          this.getEpidemicSituationInfo();
      } else {
          this.getEpidemicSituationLocalInfo();
      }
    
  }
}
</script>
<style lang="less" scoped>
.listInfoOuter {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.listInfo {
  width: 100%;
  height: 340px;
}

.headBox {
  display: flex;
  justify-content: center;
  background-color: rgba(36, 147, 221, 0.3);
}
.headBox_num {
  width: 50px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-weight: 800;
  color: #ffe316;
}
.headBox_pie {
  width: 90px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-weight: 800;
  color: #ffe316;
}
.contentBoxOuter {
  height: calc(100% - 40px);
  overflow-y: auto;
}
.contentBox {
  display: flex;
  justify-content: center;
}
.contentBoxOuter::-webkit-scrollbar {
  display: none;
}
.contentBox_num {
  width: 50px;
  height: 37px;
  text-align: center;
  line-height: 37px;
  font-weight: 800;
  color: #f5f6f6;
}
.contentBox_pie {
  width: 90px;
  height: 37px;
  padding: 0 4px;
  box-sizing: border-box;
  text-align: center;
  line-height: 37px;
  font-weight: 800;
  color: #8ba7b3;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: url("../../../assets/img/zhts/line.png") no-repeat 0px 0px;
}
.descriptionInfo {
  width: 100%;
  height: 30px;
  color: #8cfff8;
  padding: 5px;
  font-size: 16px;
}
.descriptionInfo_time {
  font-weight: 800;
  line-height: 30px;
  margin-left: 20px;
  margin-right: 10px;
}
.descriptionInfo_text {
  font-size: 14px;
  line-height: 30px;
}

.off {
  background-color: rgba(36, 147, 221, 0.15);
}

.firstRow {
  background: url("../../../assets/img/zhts/one.png") no-repeat 10px 10px;
}
.twoRow {
  background: url("../../../assets/img/zhts/two.png") no-repeat 10px 10px;
}
.threeRow {
  background: url("../../../assets/img/zhts/three.png") no-repeat 10px 10px;
}
.fourRow {
  background: url("../../../assets/img/zhts/four.png") no-repeat 10px 10px;
}
.loading {
  width: 100%;
  height: 80px;
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  position: absolute;
  top: 724px;
  z-index: 999;
}
.noData {
  width: 100%;
  height: 80px;
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  position: absolute;
  top: 724px;
  z-index: 999;
  color: #fff;
}
</style>
